/**
 * 数据绑定
 */
import {html, LitElement} from 'lit';
import {live} from 'lit/directives/live.js';

class LitInput extends LitElement {
    static properties = {
        value: {
            type: String,
            reflect: true,
        },
    }
    constructor() {
        super();
        this.value = "";
    }
    change = (e) => {
        this.value = e.target.value;
    }

    render() {
        return html`
            <div>输入：
                <input .value=${live(this.value)} 
                       @change="${this.change}" 
                       @input=${this.change} type="text"
                       placeholder="please input"/>
                <span>${this.value}</span>
            </div>`
    }
}
customElements.define('lit-input', LitInput);
export default LitInput;
